<template>
  <div id="tabbar-item" >
    <img :src="isSelect?tabbarData.activeImage:tabbarData.normalImage" alt="">
    <div class="title" :style="{'color':isSelect?tabbarData.activeColor:tabbarData.normalColor}">{{tabbarData.title}}</div>
  </div>
</template>

<script>
  export default {
    name: "TabbarItem",
    data:function () {

      return {

      }
    },
    props:{
      tabbarData:{
        type:Object,
        default:function () {

          return {}
        }
      },
      index:{
        type: Number,
        default:function () {
          return 0
        }
      },
      isSelect:{
        type:Boolean,
        default:function () {

          return false;
        }
      }
    },
    methods:{
      itemClick(){

        // this.$emit('click',this.index);
      }
    }
  }
</script>

<style scoped>

#tabbar-item{
  flex-grow: 1;
  margin-top: 5px;
}

#tabbar-item img{
  width: 25px;
  height: 25px;
  align-content: center;
  vertical-align: middle;
}

#tabbar-item .title{

  margin-top: 3px;
}
</style>
